<template>
  <div style="height: 100%; width: 100%">
    <div class="personInfo">
      <div class="personBox" id="personBox">
        <div
          class="personTop"
          :style="{
            width: '100%',
            height: '100%',
            backgroundImage: `url(${obj.bgcImg})`,
          }"
        >
          <div class="outLogin">
            <div class="outLogin-btn" @click="LoginOut">退出登录</div>
          </div>
          <div class="topLeft">
            <div class="demo-type personHead">
              <el-avatar :size="100" @error="errorHandler">
                <img v-if="obj.avatarUrl" :src="obj.avatarUrl" />
                <img
                  v-else
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
            </div>
            <div class="userListFo">
              <div class="FocusOn">关注：{{ obj.FocusOn }}</div>
              <div class="fans">粉丝：{{ obj.fans }}</div>
            </div>
          </div>
          <div class="topRight">
            <div class="userBaseInfo">
              <div class="userName">
                {{ obj.userName }}
                <!-- <div class="userVip">
                  <img
                    class="auto-img"
                    :src="
                      obj.ifVip == 0
                        ? ''
                        : require('../../../public/hasVip.png')
                    "
                    alt=""
                  />
                </div> -->
              </div>
            </div>
            <div class="userDes">个人简介：{{ obj.desc }}</div>
            <div class="userInfo_list">
              <div class="level">Lv.{{ obj.level }}</div>
            </div>
          </div>
        </div>
        <div class="personBottom" id="personBottom">
          <div class="personCon-title">创建的歌单<span></span></div>
          <div class="personCon-box">
            <div
              class="personCon-con"
              v-for="(item, index) in CreatRankData"
              :key="index"
              @click="cheakInfomation(item.id, item.name)"
            >
              <div class="person-List-img">
                <!-- <img class="auto-img" :src="item.coverImgUrl" alt="" /> -->
                <img
                  v-lazy="item.coverImgUrl"
                  :key="item.coverImgUrl"
                  class="auto-img"
                />
              </div>
              <div class="personCon-text">{{ item.name }}</div>
            </div>
          </div>

          <div class="personCon-title">收藏的歌单<span></span></div>
          <div class="personCon-box">
            <div
              class="personCon-con"
              v-for="(item, index) in CollectionRankData"
              :key="index"
              @click="cheakInfomation(item.id)"
            >
              <div class="person-List-img">
                <!-- <img class="auto-img" :src="item.coverImgUrl" alt="" /> -->
                <img
                  v-lazy="item.coverImgUrl"
                  :key="item.coverImgUrl"
                  class="auto-img"
                />
              </div>
              <div class="personCon-text">{{ item.name }}</div>
            </div>
          </div>
          <!-- 详情页面 -->
          <div class="personCon-DetailBox" v-if="isShow">
            <div class="goBack" @click="goBack"></div>
            <div class="contain-list">
              <div
                class="contain-list-con"
                v-for="(item, index) in rankData"
                :key="index"
                @click="getURL(item.id)"
              >
                <div class="contain-list-nav clearfix">
                  <div class="contain-index fl">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="contain-list-con-left fl">
                    <img
                      class="auto-img"
                      :src="rankData.length > 0 ? item.al.picUrl : ''"
                      alt=""
                    />
                  </div>
                  <div class="contain-list-con-cent fl">
                    <div class="cent-top-name">
                      {{ rankData.length > 0 ? item.name : "" }}
                    </div>
                    <div class="cent-top-text">
                      {{ rankData.length > 0 ? item.ar[0].name : "" }}
                    </div>
                  </div>
                  <div class="contain-list-con-trackCount fr">
                    <div class="con-list-item item1">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="加入歌单"
                        placement="top"
                      >
                        <img
                          class="auto-img"
                          :src="require('../../assets/image/icon/jiahao.png')"
                          alt=""
                        />
                      </el-tooltip>
                    </div>
                    <div
                      class="con-list-item item2"
                      @click.stop="JOinPlayList(item.id)"
                    >
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="加入播放列表"
                        placement="top"
                      >
                        <img
                          class="auto-img"
                          :src="require('../../assets/image/icon/liebiao.png')"
                          alt=""
                        />
                      </el-tooltip>
                    </div>
                    <div
                      class="con-list-item item3"
                      @click.stop="downloadMusic(item.id, item.name)"
                    >
                      <DownLoad ref="mychild" />
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="下载"
                        placement="top"
                      >
                        <img
                          class="auto-img"
                          :src="require('../../assets/image/icon/xiazai.png')"
                          alt=""
                        />
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken, getUserid } from "@/utils/auth";
import { getUserFollows } from "../../Api/personInfoApi";
import {
  getUserInfoPerson,
  getUserPlayInfo,
  getSubcountInfo,
  getVipInfo,
  getUserLikeList,
} from "@/Api/personInfoApi";
import {
  getMusicPlaylistInfo,
  getMusicDetailInfo,
  getURLInfo,
} from "@/Api/seachApi";

import DownLoad from "@/components/publicCompontents/DownLoad";

export default {
  name: "PersonInfo",
  components: {
    DownLoad,
  },
  data() {
    return {
      obj: {
        // 个人背景图片
        bgcImg: "",
        // 用户头像
        avatarUrl: "",
        // 用户名字
        userName: "",
        // 等级
        level: "",
        // 个性签名
        desc: "",
        // 关注人数
        FocusOn: "",
        // 粉丝人数
        fans: "",
        //是否是VIP用户
        ifVip: 0,
      },
      CreatRankData: [], //用户创建的歌單
      CollectionRankData: [], //用户创建的歌單
      rankData: [], //詳情列表數據
      rankTrackIds: [], //歌曲列表ID
      playlistCount: 0, // 歌单数据
      isShow: false, //歌單詳情顯示
    };
  },
  computed: {
    // 获取audio标签
    getAudioElement() {
      return this.$store.state.musicState.audioElement;
    },
    // 音乐Id
    musicID() {
      return this.$store.state.musicState.musicID;
    },
  },
  created() {
    this.getUserInfo();
  },

  methods: {
    // 获取用户资料
    async getUserInfo() {
      let userid = getUserid();
      if (!userid) {
        const loading = this.$loading({
          background: "rgba(0,0,0,0.6)",
          text: "用户未登录，即将跳转登录页...",
          spinner: "el-icon-loading",
          target: "#personBottom", //局部加載效果
        });
        setTimeout(() => {
          this.$router.push("/home/login");
          loading.close();
        }, 1500);
        return;
      }

      const loading = this.$loading({
        background: "rgba(0,0,0,0.6)",
        text: "正在加载中...",
        spinner: "el-icon-loading",
        target: "#personBox", //局部加載效果
      });
      await getUserInfoPerson({ uid: userid })
        .then((res) => {
          // console.log("getUserInfoPerson", res);
          if (res.code == 200) {
            this.obj = {
              // 个人背景图片
              bgcImg: res.profile.backgroundUrl,
              userName: res.profile.nickname,
              avatarUrl: res.profile.avatarUrl,
              level: res.level,
              desc: res.profile.signature,
              FocusOn: res.profile.follows,
              fans: res.profile.followeds,
              ifVip: res.profile.vipType,
            };
            this.playlistCount = res.profile.playlistCount;
            // getVipInfo({ uid: "132977181" }).then((res) => {
            //   console.log("vip信息", res);
            // });
            // getUserFollows({ uid: userid, limit: 100 }).then((res) => {
            //   console.log("获取关注", res);
            // });
            loading.close();
          }
        })
        .catch((err) => {
          loading.close();
          console.log(err);
        });
      // 获取用户歌单
      await getUserPlayInfo({ uid: userid, limit: 5000 })
        .then((res) => {
          if (res.code == 200) {
            this.CreatRankData = res.playlist.slice(0, this.playlistCount);
            this.CollectionRankData = res.playlist.slice(this.playlistCount);
            loading.close();
          }
        })
        .catch((err) => {
          loading.close();
          console.log(err);
        });
    },

    // 退出登录
    LoginOut() {
      this.$store.dispatch("user/logout");
      this.$router.push({ name: "Login" });
    },
    // 查看详情列表
    cheakInfomation(uid, name) {
      const loading = this.$loading({
        background: "rgba(0,0,0,0.6)",
        text: "正在加载中...",
        spinner: "el-icon-loading",
        target: "#personBottom", //局部加載效果
      });
      this.isShow = true;
      this.rankTrackIds = [];
      if (name === "--A-w喜欢的音乐") {
        getUserLikeList({ uid })
          .then((res) => {
            loading.close();
            console.log("--A-w喜欢的音乐", res);
          })
          .catch((err) => {
            loading.close();
          });
      } else {
        getMusicPlaylistInfo({ id: uid })
          .then((res) => {
            if (res.code == 200) {
              res.privileges.map((v) => {
                this.rankTrackIds.push(v.id);
              });
              this.getMusicListInfo();
              loading.close();
            }
          })
          .catch((err) => {
            loading.close();
            this.isShow = false;
            console.log(err);
          });
      }
    },
    // 获取列表歌曲信息
    getMusicListInfo() {
      getMusicDetailInfo(this.rankTrackIds)
        .then((res) => {
          if (res.code == 200) {
            this.rankData = res.songs;
          }
        })
        .catch((err) => {
          loading.close();
          // console.log(err);
        });
    },
    errorHandler() {
      return false;
    },
    goBack() {
      this.isShow = false;
    },
    // 点击播放
    getURL(id) {
      // console.log(id);
      if (this.musicID === id) {
        return;
      }
      this.$store.commit("musicState/isClickPlay", false);
      // this.axios({
      //   method: "GET",
      //   url: " https://autumnfish.cn/song/url?id=" + id,
      // })
      getURLInfo({ id: id })
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            // this.$store.commit("musicState/audioSrc", res.data[0].url);
            this.$store.commit("musicState/SetMusicID", id);
            this.$store.commit("musicState/SetMusicPlayListData", id);
            // setTimeout(() => {
            //   this.$store.commit("musicState/isClickPlay", true);
            //   this.getAudioElement.play();
            // }, 800);
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    // 加入播放列表
    JOinPlayList(uid) {
      // 加入播放列表
      this.$store.commit("musicState/SetMusicPlayListData", uid);
    },
    // 下载音乐
    downloadMusic(uid, MusicName) {
      this.$nextTick(() => {
        this.$refs.mychild[0].downLoad(uid, MusicName);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.personInfo {
  width: 100%;
  height: 100%;
  min-width: 700px;
  background-color: rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  position: relative;

  .personBox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    // position: absolute;
    // top: calc(5%);
    display: flex;
    flex-flow: column;
  }

  .personTop {
    flex: 5;
    margin-top: 5%;
    max-height: 260px;
    display: flex;
    color: rgba(255, 255, 255, 0.6);
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 10px;
    // overflow: hidden;
    position: relative;

    .outLogin {
      position: absolute;
      top: -52px;
      width: 100%;
      height: 50px;
      line-height: 56px;
      // background-color: red;
      vertical-align: middle;

      &:hover {
        .outLogin-btn {
          // background-color: rgba(255, 255, 255, 0.6);

          // color: rgba(255, 255, 255, 0.8);
          background-image: -webkit-linear-gradient(
            bottom,
            rgba(206, 180, 230, 1),
            rgba(69, 219, 199, 0.8),
            rgba(107, 213, 255, 1),
            rgb(198, 138, 238)
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .outLogin-btn {
        position: absolute;
        right: 20px;
        width: 120px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.2);
        border-radius: 26px;
        font-size: 20px;
        font-weight: 800;
        font-family: Helvetica, "Hiragino Sans GB", "Microsoft Yahei",
          "微软雅黑", Arial, sans-serif;
        font-style: oblique;
        cursor: pointer;

        &:hover {
          font-style: normal;
          font-size: 21px;
        }
      }
    }
    .topLeft {
      flex: 5;
      min-width: 300px;
      box-sizing: border-box;
      position: relative;

      .personHead {
        position: absolute;
        top: calc(50% - 80px);
        left: calc(50% - 60px);
        cursor: pointer;
      }
      .userListFo {
        width: 230px;
        color: rgba(255, 255, 255, 0.7);
        position: absolute;
        left: calc(50% - 74px);
        bottom: 5px;
        font-size: 20px;
        display: flex;

        .FocusOn {
          margin-right: 10px;
        }
      }
    }
    .topRight {
      flex: 7;
      position: relative;
      box-sizing: border-box;
      padding: 10px 30px;

      .userBaseInfo {
        width: 100%;
        height: 36px;
        line-height: 36px;
        margin-top: 30px;
        // background-color: red;
        .userName {
          display: inline-block;
          // margin-top: 30px;
          font-size: 32px;
          text-align: left;

          position: relative;
          position: absolute;
          left: 20px;

          .userVip {
            position: absolute;
            right: -76px;
            top: -12px;
            width: 70px;
            height: 30px;
          }
        }
      }

      .userDes {
        height: 95px;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        margin-top: 20px;
        // text-indent: 2em;
        text-align: justify;
      }
      .userInfo_list {
        width: 100%;
        box-sizing: border-box;
        margin-top: 10px;
        height: 30px;
        line-height: 30px;

        .level {
          width: 50px;
          background-color: rgba(255, 255, 255, 0.2);
          border-radius: 20px;
          padding: 0 5px;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
  .personBottom {
    flex: 7;
    background-color: rgba(255, 255, 255, 0.2);
    height: calc(100% - 260px - 5%);
    position: relative;
    overflow: hidden;
    overflow: scroll;

    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-o-scrollbar {
      width: 0px;
    }
    &::-moz-scrollbar {
      width: 0px;
    }
    .personCon-title {
      font-size: 24px;
      font-weight: 500;
      text-align: left;
      text-indent: 2em;
      padding: 8px 0;
      color: rgba(255, 255, 255, 0.6);
      position: relative;

      & > span {
        position: absolute;
        top: 26px;
        left: 174px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid rgba(250, 2, 2, 0.8);
      }
    }
    // 专辑栏
    .personCon-box {
      width: 100%;
      max-height: 508px;
      padding: 0 !important;
      color: #d6d6d4;
      // background-color: #fff;
      overflow: hidden;
      overflow: scroll;
      // 滚动不产生滚动条兼容
      &::-webkit-scrollbar {
        width: 0px;
      }
      &::-o-scrollbar {
        width: 0px;
      }
      &::-moz-scrollbar {
        width: 0px;
      }
      .personCon-con {
        // display: inline-block;
        width: 190px;
        height: 230px;
        box-sizing: border-box;
        // flex: 1;
        float: left;
        margin: 8px 34px;
        cursor: pointer;
        border-radius: 10px;
        overflow: hidden;
        // background-color: rgba(255, 255, 255, 0.8);
        .person-List-img {
          width: 100%;
          height: 190px;
          // background-color: rgba(255, 255, 255, 0.8);
        }
        .personCon-text {
          height: 26px;
          line-height: 26px;
          width: 100%;
          font-size: 18px;
          margin: 10px 0;
          text-overflow: ellipsis;
          white-space: normal;
          overflow: hidden;
        }
      }
    }

    .personCon-DetailBox {
      height: 100%;
      width: 100%;
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.8);
      box-sizing: border-box;
      padding: 20px 40px;

      .goBack {
        width: 40px;
        height: 40px;
        background-image: url("../../assets/image/icon/fanhui.png");
        background-size: 100%;
        position: absolute;
        top: 5px;
        left: 0px;
        cursor: pointer;
        &:hover {
          background-image: url("../../assets/image/icon/fanhui1.png");
          background-size: 100%;
        }
      }
    }
    .contain-list {
      width: 100%;
      // height: 680px;
      height: 100%;
      margin-top: 10px;
      background-color: rgba(0, 0, 0, 0);
      overflow: hidden;
      overflow: scroll;
      &::-webkit-scrollbar {
        width: 0px;
      }
      &::-o-scrollbar {
        width: 0px;
      }
      &::-moz-scrollbar {
        width: 0px;
      }

      .contain-list-con {
        width: 100%;
        height: 130px;
        padding: 20px;
        box-sizing: border-box;

        background-color: rgba(255, 255, 255, 0.1);

        .contain-list-nav {
          width: 100%;
          height: 100%;
          overflow: hidden;
          border-bottom: 1px solid #fff;
          position: relative;
          cursor: pointer;
        }

        &:hover {
          .contain-list-nav {
            border: none;
            background-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.6);
          }
          .contain-index {
            color: rgba(255, 255, 255, 0);
          }
          .contain-list-con-left {
            transition: all 0.3s;
            transform: translateX(-70px);
          }

          .cent-top-name {
            transition: all 0.3s;
            transform: translateX(-80px);
          }
          .cent-top-text {
            transition: all 0.3s;
            transform: translateX(-80px);
          }
          .item0 {
            transition: all 0.4s;
            transform: translateY(0px);
          }
          .item1 {
            transition: all 0.5s;
            transform: translateY(0px);
          }
          .item2 {
            transition: all 0.6s;
            transform: translateY(0px);
          }
          .item3 {
            transition: all 0.6s;
            transform: translateY(0px);
          }
        }
      }
      .contain-index {
        width: 150px;
        height: 100%;
        font-size: 80px;
        font-weight: 900;
        margin-right: 10px;
        color: rgba(255, 255, 255, 0.8);
        position: relative;
        // background-color: rgba(0, 0, 0, 0.1);

        span {
          position: absolute;
          bottom: -26px;
          left: calc(50% - 26px);
        }
      }
      .contain-list-con-left {
        width: 90px;
        height: 90px;
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.3s;
        transform: translateX(0px);
        background-color: rgba(0, 0, 0, 0.3);
      }
      .contain-list-con-cent {
        margin-left: 26px;
        display: flex;
        flex-flow: column;
        text-align: left;

        .cent-top-name {
          width: 300px;
          font-size: 20px;
          margin-top: 10px;
          font-weight: bold;
          color: rgba(255, 255, 255, 0.8);
          transition: all 0.3s;
          transform: translateX(0px);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .cent-top-text {
          width: 300px;
          max-width: 300px;
          min-width: 200px;
          font-size: 20px;
          margin-top: 10px;
          font-weight: bold;
          transition: all 0.3s;
          transform: translateX(318px);
          text-align: right;
          color: rgba(255, 255, 255, 0.8);
        }
      }
      .contain-list-con-trackCount {
        height: 100%;
        line-height: 130px;
        float: right;
        margin-right: 10px;

        .con-list-item {
          display: inline-block;
          width: 30px;
          height: 30px;
          vertical-align: middle;
          margin-right: 10px;
          transition: all 0.3s;
          transform: translateY(50px);
          cursor: pointer;
        }
      }
    }
    // .personCon-Detail{
    //   height: 100%;
    //   width: 100%;
    //   background-color: rgba(255, 255, 255, 0.8);
    //   // position: absolute;
    //   // top: 0;
    //   // right: -100%;
    //   // transform: translateX(0);

    // }
  }
}
</style>
